<template>
    <div class="safe2Reform">
        <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>整改回复及验收单
        </div>
        <div class="safe2ReformBox">
            <ul>
                <!-- <li>
                    <h1><x-icon type="ios-arrow-down" size="30"></x-icon> 文明施工 <span>1条</span> </h1>
                    <p @click="show2"><em>材料围堆放整齐,未标明名称有火患的风险,</em> <span>待复查验证</span> </p>
                </li> -->
                <li>
                    <group>
                        <cell
                            title="文明施工"
                            is-link
                            :border-intent="false"
                            :arrow-direction="showContent001 ? 'up' : 'down'"
                            @click.native="showContent001 = !showContent001">
                        </cell>
                        <template v-if="showContent001">
                             <p @click="show2" class="pLine"><em>材料围堆放整齐,未标明名称有火患的风险,</em> <span>待复查验证</span> </p>
                        </template>
                    </group>
                </li>
            </ul>
        </div>
        <actionsheet
            v-model="show_p"
            :menus="menu7">
        </actionsheet>
    </div>
</template>
<script>
import { Actionsheet, Group, CellBox, Checklist, Cell } from 'vux'
export default{
    components: {
        Actionsheet,
        Group,
        Checklist,
        Cell,
        CellBox
    },
    data () {
        return {
            show_p:false,
            menu7:{
                menu1:'材料围堆放整齐,未标明名称有火患的风险来看看测试效果,材料围堆放整齐,未标明名称有火患的风险来看看测试效果,材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果材料围堆放整齐,未标明名称有火患的风险来看看测试效果'
            },
            showContent001: false,
        }
    },
    methods : {
        show2(){
            this.show_p=true
        },
        change (val, label) {
            console.log('change', val, label)
        },
    }
}
</script>
<style lang="less">
.safe2Reform{
    width: 100%;
    height: 100%;
    .header{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: relative;
        font-size: 18px;
        background: #2269ff;
        color: #fff;
        .vux-x-icon{
            fill:cornsilk;
            position: absolute;
            left: 0;
            top: 5px;
            width: 30px;
            height: 30px;
        }
    }
    .safe2ReformBox{
        height: 603px;
        width: 100%;
        background-color: #ebeef2;
        ul{
            li{
                h1,p{
                    height: 50px;
                    line-height: 50px;
                    font-size: 20px;
                    color: #2269ff;
                    span{
                        float: right;
                        font-size: 18px;
                        color: #666;
                        width: 90px;
                        text-align: center;
                    }
                    .vux-x-icon{
                        fill:#999;
                        float: left;
                        width: 30px;
                        height: 30px;
                        margin-top: 10px;
                    }
                }
                .pLine{
                    font-size: 16px;
                    padding: 0 10px;
                    border-top: 1px solid #eee;
                    em{
                        width: 260px;
                        color: #999;
                        float: left;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .weui-actionsheet{
        top: 30%;
        // width: 90%;
        // left: 20px;
        background-color:rgba(0,0,0,0);
    }
    .weui-actionsheet__menu{
        margin: 0 auto;
        width: 80%;
        height: 200px;
        overflow-y: auto;
        line-height: 20px;
        border-radius: 10px;
    }
    .vux-actionsheet-menu-default{
        padding: 10px!important;
        text-align: left;
    }
}


</style>

